<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main" v-wechat-title="$route.meta.title='尊敬的'+leaderData.name+'欢迎您'">
		<!--风险开始-->
		<div class="risk">
			<div id="risk-content">
				
			</div>
			<div class="risk-total">
				<div>
					<div class="risk-total-title">已处理风险</div>
					<div class="risk-total-desc">30<span>次</span></div>
				</div>
				<div>
					<div class="risk-total-title">未来处理风险</div>
					<div class="risk-total-desc">0<span>次</span></div>
				</div>
			</div>
		</div>
		<!--风险结束-->
		<!--咨询统计开始-->
		<div class="consult">
			<div class="consult-title">近一年内校内咨询情况</div>
			<div id="consult-content"></div>
		</div>
		<!--咨询统计结束-->
		<!--菜单开始-->
		<div class="menu">
			<ul>
				<li>
					<a href="javascript:;">
						<div class="menu-title">案例检索</div>
						<div class="menu-desc">海量类似案例辅助决策</div>
					</a>
					<a href="https://m.tianyancha.com/">
						<div class="menu-title">企业检索</div>
						<div class="menu-desc">第三方工具提供检索</div>
					</a>
				</li>
				<li>
					<router-link :to="{path:'reportList'}">
						<div class="menu-title">我的消息</div>
						<div class="menu-desc">学生的投诉/举报/提问</div>
					</router-link>
					<a href="javascript:;">
						<div class="menu-title">发起咨询</div>
						<div class="menu-desc">邀请律师进行决策咨询</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<div class="menu-title">发起群聊</div>
						<div class="menu-desc">多人在线同步决策</div>
					</a>
					<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9f11d37a0a4b9f4b&redirect_uri=https%3a%2f%2fwww.lawguanjia.com%2fdist%2f%23%2fwechatLeader%2fauthorizeInfo&response_type=code&scope=snsapi_userinfo&state=leader#wechat_redirect">
						<div class="menu-title">系统设置</div>
						<div class="menu-desc">系统维护和安全</div>
					</a>
				</li>
			</ul>
		</div>
		<!--菜单结束-->
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js	
//import {request} from '../../../utils/request'
import router from '../../../router'
//import echarts from 'echarts'
	
export default {
	name: 'LeaderCenter',
	components: {
		Loading
	},
    data(){
		return {
			isLoading:true,//监控页面是否加载完毕
			ajaxFlag:true,//监控ajax请求，避免多次请求
			ajaxData:{},//ajax提交的值
			
			leaderData:{}
		}
    },
    created:function(){
		var that=this;
		var token=localStorage.getItem('token');
		request({
			headers:{
				'Content-Type': 'application/json;charset=UTF-8',
				'Authorization':token
			},
			url: "/wechatLeader/leaderCenter",
			method: "post",
			data:that.ajaxData
		}).then(function(res){
		   if(res.flag){
			   that.leaderData=res.leaderData;
		   }else{
			   router.push({path:'/wechat/leaderLogin'});
			   return 0;
		   }
		   that.isLoading=false;
		}).catch(function(error){
			that.isLoading=false;
			console.log(error);
		})
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		var that=this;
  		//以下为第一图表
  		
  		// 基于准备好的dom，初始化echarts实例
  		var riskEcharts = echarts.init(document.getElementById('risk-content'));
  		
  		var option = {
  			title: {
  				text: "正在监控",
  				x: 'center',
  				y: '75%',
  				textStyle:{
  					color:"#6177c0",
  					fontSize:14,
  					fontWeight:"normal"
  				}
  			},
  			tooltip: {
  				show:false
  			},
  			series: [
  				{
  					name: '风险预警',
  					type: 'gauge',
  					detail: {
  						formatter: '{value}分',
  						fontSize: 20
  					},
  					data: [80],
  					axisLine:{ 
  						lineStyle:{
  							width:10,
  							color:[[0.3, '#12c0fc'], [0.7, '#23cddc'], [1, '#18e9c2']]
  						}
  					},
  					splitLine:{
  						show:true,
  						length:15
  					},
  					axisTick:{
  						show: true
  					},
  					axisLabel:{
  						show:false
  					},
  					pointer:{
  						show:true,
  						width: 5
  					}
  				}
  			]
  	
  		};
  		
  		// 使用刚指定的配置项和数据显示图表。
  		riskEcharts.setOption(option);
  		
  		//以下为第二图表
  		var xData=new Array();//坐标准备
  		var yData=new Array();//坐标准备
  		// 基于准备好的dom，初始化echarts实例
  		var consultEcharts = echarts.init(document.getElementById('consult-content'));
          
  		xData=['01','02','03','04','05','06','07','08','09','10','11','12'];
  		yData=[10,20,30,40,50,10,20,30,40,50,54,22];
  		
  		// 指定图表的配置项和数据
  		var option = {
  			title: {
  				show:false
  			},
  			tooltip: {
  				trigger: 'axis',
  				axisPointer: {
  					type: 'line'
  				},
  				formatter: '日期：{b}<br/>{a}：{c}'
  			},
  			//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
  			legend: {
  				show:false
  			},
  			xAxis : [
  				{
  					name:"日期",
  					type : 'category',
  					data : xData,
  					nameLocation:"center",
  					nameTextStyle:{
  						lineHeight: 30
  					},
  					axisLabel: {
  						show: true,
  						textStyle: {
  						  color:"#41e7db",
  						  fontSize : 10      //更改坐标轴文字大小
  						}
  					},
  					axisLine:{
  						lineStyle:{
  							color:"#fff"
  						}
  					}
  				},
  			],
  			yAxis : [
  				{
  					name:"次数",
  					type : 'value',
  					axisLabel: {
  						show: true,
  						textStyle: {
  						  color:"#fff",
  						  fontSize : 10      //更改坐标轴文字大小
  						}
  					},
  					axisLine:{
  						lineStyle:{
  							color:"#fff"
  						}
  					}
  				}
  			],
  			series : [
  				{
  					name:'咨询次数',
  					type:'bar',
  					data:yData,
  					color: {
  					    type: 'linear',
  					    x: 0,
  					    y: 0,
  					    x2: 0,
  					    y2: 1,
  					    colorStops: [{
  					        offset: 0, color: '#30bcb3' // 0% 处的颜色
  					    }, {
  					        offset: 1, color: '#3478a5' // 100% 处的颜色
  					    }],
  					    global: false // 缺省为 false
  					}
  				}
  			]
  		};
  		// 使用刚指定的配置项和数据显示图表。
  		consultEcharts.setOption(option);
  	},
  	methods:{
  		
  	}
}
</script>

<style lang="scss" scoped>
.main{
     width:100%;
	 background: radial-gradient(circle farthest-side  at top left,#30bfcf,#191c51,#191c51);
     overflow:hidden;
     position:relative;
}

.risk{
	width: 100%;
	overflow: hidden;
}
#risk-content{
	width: 100%;
	height: 18.75rem;
}
.risk-total{
	width: 100%;
	display: flex;
	margin-bottom: 1.25rem;
}
.risk-total>div{
	width: 50%;
}
.risk-total-title{
	color: #FFFFFF;
	font-size: 0.875rem;
	text-align: center;
	line-height: 1.5rem;
}
.risk-total-desc{
	color: #FFFFFF;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.875rem;
}
.risk-total-desc>span{
	font-size: 0.875rem;
}

.consult{
	width: 100%;
}
.consult-title{
	 width: 100%;
	 text-align: center;
	 line-height: 1.5rem;
	 font-size: 0.875rem;
	 color: #6177c0;
}
#consult-content{
	width: 100%;
	height: 18.75rem;
}

.menu{
	width: 100%;
	overflow: hidden;
}
.menu>ul{
	width: 96%;
	margin: auto;
	margin-bottom: 3.125rem;
}
.menu>ul>li{
	width:100%;
	display: flex;
	border-bottom: 1px solid #258c9f;
}
.menu>ul>li:nth-child(3){
	border-color: transparent !important;
}
.menu>ul>li>a{ 
	width: 50%;
	display: block;
}
.menu-title{
	color: #FFFFFF;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-top: 0.375rem;
}
.menu-desc{
	color: #6177c0;
	font-size: 0.75rem;
	line-height: 1.25rem;
}
</style>
